<template>
    <el-dialog
        v-model="showflag"
        :title="title"
        width="800"
        align-center
        :close-on-click-modal="false"
        :before-close="closebox">
        <div style="padding: 0 40px">
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon>
                <el-form-item label="回收站点名称" prop="name">
                    <el-input
                        v-model="ruleForm.name"
                        placeholder="请输入回收站点名称" />
                </el-form-item>
                <el-form-item label="所属回收企业" prop="enterprise_id">
                    <el-select
                        v-model="ruleForm.enterprise_id"
                        placeholder="请选择"
                        style="width: 250px">
                        <el-option
                            v-for="(item, index) in companylist"
                            :key="index"
                            :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="注册资金" prop="zczj">
                    <el-input
                        v-model="ruleForm.zczj"
                        placeholder="请输入注册资金" />
                </el-form-item>
                <el-form-item label="所属市" prop="city">
                    <el-select
                        @change="changcity"
                        v-model="ruleForm.city"
                        placeholder="请选择">
                        <el-option
                            v-for="(item, index) in citylist"
                            :key="index"
                            :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属区县" prop="area">
                    <el-select v-model="ruleForm.area" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in arealist"
                            :key="index"
                            :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所在位置" prop="address">
                    <el-input
                        v-model="ruleForm.address"
                        placeholder="请输入所在位置" />
                </el-form-item>
                <el-form-item label="所在位置坐标" prop="zuobiao">
                    <el-input
                        v-model="ruleForm.zuobiao"
                        placeholder="例如：101.70,36.70">
                        <template #append>
                            <el-button type="primary" @click="openmap"
                                >选取坐标</el-button
                            >
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="监控设备序列号" prop="xlh">
                    <el-input
                        v-model="ruleForm.xlh"
                        placeholder="请输入监控设备序列号">
                    </el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="contact">
                    <el-input
                        v-model="ruleForm.contact"
                        placeholder="请输入负责人"
                        style="width: 250px" />
                </el-form-item>
                <el-form-item label="负责人电话/账号" prop="telphone">
                    <el-input
                        v-model="ruleForm.telphone"
                        placeholder="请输入负责人电话/账号"
                        style="width: 250px" />
                </el-form-item>
                <el-form-item label="账号密码" prop="password">
                    <el-input
                        v-model="ruleForm.password"
                        placeholder="默认密码：123456"
                        style="width: 250px" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input
                        v-model="ruleForm.sort"
                        type="number"
                        placeholder="请输入排序"
                        style="width: 250px" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closebox">取消</el-button>
                <el-button
                    v-if="showflag && isedit"
                    type="primary"
                    @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, provide, reactive, toRaw, inject } from "vue";
import { post } from "../../../../api/request";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
let showflag = ref(false);
let title = ref("新增回收站点");
const getdata = inject<() => void>("getdata")!; //父组件的方法

let isedit = ref(true);
let citylist = ref([]);
let arealist = ref([]);
let companylist = ref([]);
onMounted(() => {
    post({
        url: "/api/enterprise/index",
        data: {
            p: 1, //当前页数
            size: 15, //每页显示数量
        },
    }).then((res: any) => {
        companylist.value = res.data.list;
    });

    post({
        url: "/api/area/index",
        data: {
            parent_id: 3021,
        },
    }).then((res: any) => {
        citylist.value = res.data.list;
    });
});

const changcity = (e: any) => {
    let id = citylist.value.find((item: any) => item.name == e)?.id;
    post({
        url: "/api/area/index",
        data: {
            parent_id: id,
        },
    }).then((res: any) => {
        arealist.value = res.data.list;
    });
};

const openmap = () => {
    window.open("https://lbs.amap.com/console/show/picker");
};

//表单相关---------------------------------------

interface RuleForm {
    hut_id: string;
    name: string;
    enterprise_id: string;
    address: string;
    zczj: number;
    zuobiao: string;
    city: string;
    area: string;
    contact: string;
    xlh:string;
    telphone: string;
    lat: string;
    lon: string;
    password: string;
    sort:number;
}

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
    hut_id: "",
    name: "",
    enterprise_id: "",
    address: "",
    zuobiao: "",
    zczj: 0,
    contact: "",
    xlh:'',
    telphone: "",
    city: "",
    area: "",
    lat: "",
    lon: "",
    password: "",
    sort:0
});

const rules = reactive<FormRules<RuleForm>>({
    name: [{ required: true, message: "请填写名称", trigger: "blur" }],
    enterprise_id: [
        {
            required: true,
            message: "请选择所属企业",
            trigger: "change",
        },
    ],
    zczj: [{ required: true, message: "请填写注册资金", trigger: "blur" }],
    address: [{ required: true, message: "请填写所在位置", trigger: "blur" }],
    city: [{ required: true, message: "请选择所属市", trigger: "blur" }],
    area: [{ required: true, message: "请选择所属区县", trigger: "blur" }],
    zuobiao: [{ required: true, message: "请填写坐标", trigger: "blur" }],
    contact: [{ required: true, message: "请填写负责人", trigger: "blur" }],
    xlh: [{ required: true, message: "请填写监控设备序列号", trigger: "blur" }],
    telphone: [
        { required: true, message: "请填写负责人电话", trigger: "blur" },
    ],
});
const closebox = () => {
    showflag.value = false;
    resetdata()
};

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.lat = ruleForm.zuobiao.split(",")[1];
            ruleForm.lon = ruleForm.zuobiao.split(",")[0];
            post({
                url: ruleForm.hut_id ? "/api/hut/edit" : "/api/hut/add",
                data: toRaw(ruleForm),
            }).then((res: any) => {
                ElMessage.success("操作成功!");
                getdata();
                resetdata();
            });
        } else {
            console.log("error submit!", fields);
        }
    });
};
//表单END---------------------------------------

const resetdata = () => {
    Object.assign(ruleForm, {
        hut_id: "",
        name: "",
        enterprise_id: "",
        address: "",
        zuobiao: "",
        zczj: 0,
        contact: "",
        xlh:'',
        telphone: "",
        city: "",
        area: "",
        lat: "",
        lon: "",
        password: "",
        sort:0
    });
    showflag.value = false;
    title.value = "新增回收站点";
};

// 通过 defineExpose 暴露给父组件
defineExpose({
    showflag,
    title,
    ruleForm,
    isedit,
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
    margin-bottom: 30px;
}
</style>
